/* eslint-disable */
import React, { Component } from 'react';
import styles from './index.less';
import Animation from '../../common/Animation';

/**
 * 驾驶舱弹窗
 */
class CockpitSmallModal extends Component{

  static defaultProps = {
    title: '',            // 标题
    className: '',        // 类名
    style: {},            // 样式
    handleClose: null,    // 点击关闭事件
  }

  defaultStyle = {
    width: 800,
    height: 600,
  }

  // 标题
  getTitle = () => {
    const { title, handleClose } = this.props;
    return (
      <div className={styles["title"]}>
        <span>{title}</span>
        <div className={styles["close"]} onClick={handleClose || null}>×</div>
      </div>
    )
  }

  // 内容主体
  getContent = () => {
    return (
      <div className={styles["content"]}>
        { this.props.children }
      </div>
    )
  }

  // 边角
  getCornor = (className) => {
    return <div className={ styles["cornor"] + ' ' + styles[className]}></div>
  }

  render() {
    const { className, style } = this.props;
    return (
      <Animation className="zoomInUp">
        <div className={styles["cockpit-modal-wrapper"]}>
          <div className={styles["inner"] + ' ' + className} style={Object.assign({}, this.defaultStyle, style)}>
            { this.getTitle() }
            { this.getContent() }
            { this.getCornor("left-top") }
            { this.getCornor("left-bottom") }
            { this.getCornor("right-top") }
            { this.getCornor("right-bottom") }
          </div>
        </div>
      </Animation>
    )
  }

}

export default CockpitSmallModal
